<template>
  <div class="HomeIndex">
    <plantimg :lbimgList="lbimgList" height="450px"></plantimg>
    <el-row class="seach">
      <el-input
        v-model="pageLine.newsTitle"
        placeholder="请输入搜索内容"
        suffix-icon="el-icon-search"
        @keyup.enter.native="onEnterSearch"
      ></el-input>
    </el-row>
    <div class="news">
      <div
        class="news-item"
        v-for="(item, index) in newsListData"
        :key="index"
        @click="goDetails(item.newsId)"
      >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img v-if="item.newsImg[0]" :src="item.newsImg[0]" class="image" />
          <div style="padding: 14px;">
            <span>{{item.newsTitle}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.newsTime|timestampToTime}}</time>
              <div type="text" class="button userName">发布人:{{item.userName}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="pagesum">
      <el-pagination
        background
        :total="newsCount"
        @size-change="handleCurrentChange"
        @current-change="handleCurrentChange"
        :page-size="pageLine.limit"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import plantimg from "../Comm/plantimg";
import { newsList_user, swiperList_user } from "../../ajax/index";
export default {
  data() {
    return {
      lbimgList: [],
      newsListData: [],
      newsCount: 0,
      pageLine: {
        page: 1,
        limit: 12,
        newsTitle: ""
      }
    };
  },
  components: {
    plantimg
  },
  created() {
    this.swiperList();
    this.newsList();
  },
  methods: {
    swiperList() {
      swiperList_user()
        .then(res => {
          if (res.code == 0) {
            this.$message({
              type: "info",
              message: res.msg
            });
            this.lbimgList = [];
          } else {
            this.lbimgList = res.data;
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("轮播图加载失败，请稍后再试！");
        });
    },
    newsList() {
      newsList_user(this.pageLine)
        .then(res => {
          if (res.code == 0) {
            this.$message({
              type: "info",
              message: res.msg
            });
            this.newsListData = [];
          } else {
            this.newsListData = res.data;
            this.newsCount = res.count;
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("新闻加载失败，请稍后再试！");
        });
    },
    handleCurrentChange(parm) {
      this.pageLine.page = parm;
      this.newsList();
    },
    goDetails(newsId) {
      this.$router.push({ path: "/home/info", query: { newsId: newsId } });
    },
    onEnterSearch(e) {
      this.pageLine.page = 1;
      this.newsList();
    }
  }
};
</script>
<style lang="scss">
.HomeIndex {
  .news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 41px;
    .news-item {
      margin: 20px 0px;
      box-sizing: border-box;
      .time {
        font-size: 13px;
        color: #999;
      }

      .bottom {
        margin-top: 13px;
        line-height: 12px;
      }

      .button {
        padding: 0;
        float: right;
      }

      .image {
        width: 100%;
        height: 300px;
        display: block;
      }

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }

      .clearfix:after {
        clear: both;
      }
    }
  }
  .seach {
    margin-top: 10px;
    text-align: center;
  }
  .pagesum {
    text-align: center;
    margin: 40px auto;
  }
  .userName {
    font-size: 14px;
  }
}
</style>